Помогите разобраться с Socket IO

[rdbn]

Добрый день.
Вопрос такой Socket IO, как на канвасе при подключении нового пользователя создать скажем еще один круг, и показать что на поле помимо его круга есть и круги других пользователей.

Собственно моя наркомания на стороне пользователя:

var socket = io.connect('http://localhost:3000');
var size = 32, field, player;

function init() {
    field = new Field(0, 0, (16 * size), (12 * size));
    var canvas = document.getElementById('gameField');
    canvas.width = field.width;
    canvas.height = field.height;
    context = canvas.getContext('2d');
}

function Player(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.draw = function(color, globalAlpha) {
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, (Math.PI * 2), true);
        context.fill();
    }; 
}

function Field(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.draw = function(color, globalAlpha) {        
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}

function draw() {
    field.draw('#fff', 1);
    player.draw('#000', 1);
}

function mouseClick() {
    $('#gameField').click(function(e) {
        var offset = $(this).offset();
        var mouseX = (e.pageX - Math.floor(offset.left));
        var mouseY = (e.pageY - offset.top);
            
        socket.emit('coordinates', { x : mouseX, y : mouseY});
    });
}

function mouseMove() {
    $('#gameField').mousemove(function(e) {
        var offset = $(this).offset();
        var mouseX = (e.pageX - Math.floor(offset.left));
        var mouseY = (e.pageY - offset.top);
        
        //console.log(mouseX+' '+mouseY);
    });
}

$(document).ready(function() {
    init();
    mouseClick();
    mouseMove();
    
    socket.on('connecting', function() {
        
    });
    
    socket.on('connect', function () {
        var x = y = ((Math.random() * 200) + 1);
        if ((x + 16) % size != 0) {
            mouseX = x - (x % size) + size / 2;
        };
        if ((y + 16) % size != 0) {
            mouseY = y - (y % size) + size / 2;
        };
        socket.emit('coordinates', { x : mouseX, y : mouseY});
    });
    
    socket.on('ball', function (data) {
        if ((data.x + 16) % size != 0) {
            mouseX = data.x - (data.x % size) + size / 2;
        };
        if ((data.y + 16) % size != 0) {
            mouseY = data.y - (data.y % size) + size / 2;
        };
        player = new Player(mouseX, mouseY, size/2);
        draw();
    });
});

Сервера:

var io = require('socket.io')(server);

io.on('connection', function (socket) {
    socket.on('coordinates', function (data) {
        socket.emit('ball', data);
        socket.broadcast.emit('ball', data);
    });
});

PS помогите разобраться а то как не искал нет не одной путной документации по Socket IO